<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>


    <div id="root">

        <ul>
            <li v-for="(item, index) in  list" v-bind:key="index"  v-on:click="deleteli(index)">
                {{item}}
            </li>
        </ul>
        <input v-model="inputstr"><button v-on:click="addli" >添加</button>

    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                list: ["zs", "ls", "wu", "zl"],
                inputstr: ""
            },
            methods: {
                addli: function () {
                    this.list.push(this.inputstr)
                    this.inputstr = ""
                },
                deleteli: function (index) {
                    // alert(index)
                    this.list.splice(index, 1)
                }
            }
        })

    </script>





</body>
</html>
